<template>
  <!-- 用户 -->
  <el-card class="user">
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-input
          v-model="input"
          placeholder="根据用户名搜索"
          size="small"
          class="inputwidth"
        />
        <el-button size="small" @click="clear">清空</el-button>
        <el-button
          size="small"
          type="primary"
          @click="getlistbyusername"
        >搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="$refs.addEdit.dialogFormVisible = true"
        >新增用户</el-button>
      </el-col>
    </el-row>
    <!-- 消息提示 -->
    <el-alert
      :title="`共${counts}条信息`"
      type="info"
      show-icon
      :closable="false"
    />
    <!-- 用户列表 -->
    <el-table
      :header-cell-style="{ background: '#fafafa' }"
      :data="userlist"
      style="width: 100%"
    >
      <el-table-column prop="id" label="序号" align="center" />
      <el-table-column prop="email" label="邮箱" align="center" />
      <el-table-column prop="phone" label="联系电话" align="center" />
      <el-table-column prop="username" label="用户名" align="center" />
      <el-table-column
        prop="permission_group_title"
        label="权限组名称"
        align="center"
      />
      <el-table-column prop="role" label="角色" align="center" />
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="edit(row)"
          />
          <el-button
            v-show="row.username !== '超级管理员'"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="page"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <!-- 新增、编辑弹出框 -->
    <add-edit ref="addEdit" :currentrow="currentrow" @updataList="getuserlist" @clear="currentrow={}" />
  </el-card>
</template>
<script>
import AddEdit from './add-edit.vue'
import { getuserlist, deluser } from '@/api/base/users'
export default {
  name: 'UserIndex',
  components: { AddEdit },
  props: {},
  data() {
    return {
      input: '',
      userlist: [],
      page: 1, // 当前页数
      pagesize: 2, // 页尺寸
      username: '',
      disabled: 1,
      counts: 0, // 共几条数据
      currentrow: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getuserlist()
  },
  mounted() {},
  methods: {
    // 获取用户列表
    async getuserlist() {
      const { data } = await getuserlist({
        page: this.page,
        pagesize: this.pagesize
      })
      this.userlist = data.list
      this.counts = data.counts
    },
    // 删除用户
    async del(id) {
      try {
        await this.$confirm('您确定删除吗？', '提示', { type: 'warning' })
        await deluser(id)
        if ((this.userlist.length === 1) & (this.page !== 1)) {
          this.page--
        }
        this.getuserlist()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑用户
    edit(row) {
      this.currentrow = row
      const _ = require('lodash')
      this.$refs.addEdit.dialogFormVisible = true
      this.$refs.addEdit.FormData = _.omit(row, ['permission_group_title', 'is_deleted'])
    },
    // 根据用户名搜索
    async getlistbyusername() {
      const { data } = await getuserlist({
        page: this.page,
        pagesize: this.pagesize,
        username: this.input
      })
      this.userlist = data.list
      this.counts = data.counts
    },
    clear() {
      this.input = ''
      this.getuserlist()
    },
    // 页尺寸
    handleSizeChange(val) {
      this.pagesize = val
      this.getuserlist()
    },
    // 当前页数
    handleCurrentChange(val) {
      this.page = val
      this.getuserlist()
    }
  }
}
</script>
<style lang="scss" scoped>
.user {
  .el-table {
    margin: 20px 0;
  }
  .inputwidth {
    width: 200px;
    margin-right: 10px;
    margin-bottom: 20px;
  }
}
</style>
